<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * resize proxy plugin for resizable.
 * same with dd/plugin/proxy
 * @ignore
 * @author yiminghe@gmail.com
 */
KISSY.add('resizable/plugin/proxy', function (S, Base, Node) {
    var $ = Node.all,
        PROXY_EVENT = '.-ks-proxy' + S.now();

<span id='KISSY-Resizable-Plugin-Proxy'>    /**
</span>     * proxy plugin for resizable
     * @class KISSY.Resizable.Plugin.Proxy
     */
    return Base.extend({
        pluginId: 'resizable/plugin/proxy',

        pluginInitializer: function (resizable) {
            var self = this,
                hideNodeOnResize = self.get('hideNodeOnResize');

            function start() {
                var node = self.get('node'),
                    dragNode = resizable.get('node');
                // cache proxy node
                if (!self.get('proxyNode')) {
                    if (typeof node === 'function') {
                        node = node(resizable);
                        self.set('proxyNode', node);
                    }
                } else {
                    node = self.get('proxyNode');
                }
                node.show();
                dragNode.parent().append(node);
                node.css({
                    left: dragNode.css('left'),
                    top: dragNode.css('top'),
                    width: dragNode.width(),
                    height: dragNode.height()
                });
                if (hideNodeOnResize) {
                    dragNode.css('visibility', 'hidden');
                }
            }

            function beforeResize(e) {
                // prevent resizable node to resize
                e.preventDefault();
                self.get('proxyNode').css(e.region);
            }

            function end() {
                var node = self.get('proxyNode'),
                    dragNode = resizable.get('node');
                dragNode.css({
                    left: node.css('left'),
                    top: node.css('top'),
                    width: node.width(),
                    height: node.height()
                });
                if (self.get('destroyOnEnd')) {
                    node.remove();
                    self.set('proxyNode', 0);
                } else {
                    node.hide();
                }
                if (hideNodeOnResize) {
                    dragNode.css('visibility', '');
                }
            }

            resizable['on']('resizeStart' + PROXY_EVENT, start)
                ['on']('beforeResize' + PROXY_EVENT, beforeResize)
                ['on']('resizeEnd' + PROXY_EVENT, end);
        },

        pluginDestructor: function (resizable) {
            resizable['detach'](PROXY_EVENT);
        }
    },{
        ATTRS: {
<span id='KISSY-Resizable-Plugin-Proxy-cfg-pluginId'>            /**
</span>             * pluginId.
             * Defaults to: 'resizable/plugin/proxy'
             * @cfg {String} pluginId
             */


<span id='KISSY-Resizable-Plugin-Proxy-cfg-node'>            /**
</span>             * how to get the proxy node.
             * default clone the node itself deeply.
             * @cfg {Function} node
             */
<span id='global-property-node'>            /**
</span>             * @ignore
             */
            node: {
                value: function (resizable) {
                    return $('&lt;div class=&quot;' + resizable.get('prefixCls') +
                        'resizable-proxy&quot;&gt;&lt;/div&gt;');
                }
            },

<span id='KISSY-Resizable-Plugin-Proxy-property-proxyNode'>            /**
</span>             * Current proxy node.
             * @type {KISSY.NodeList}
             * @property proxyNode
             */
<span id='global-property-proxyNode'>            /**
</span>             * @ignore
             */
            proxyNode: {

            },

<span id='KISSY-Resizable-Plugin-Proxy-cfg-hideNodeOnResize'>            /**
</span>             * whether hide original node when resize proxy.
             * Defaults to: false
             * @cfg {Boolean} hideNodeOnResize
             */
<span id='global-property-hideNodeOnResize'>            /**
</span>             * @ignore
             */
            hideNodeOnResize: {
                value: false
            },

<span id='KISSY-Resizable-Plugin-Proxy-cfg-destroyOnEnd'>            /**
</span>             * destroy the proxy node at the end of this drag.
             * default false
             * @cfg {Boolean} destroyOnEnd
             */
<span id='global-property-destroyOnEnd'>            /**
</span>             * @ignore
             */
            destroyOnEnd: {
                value: false
            }
        }
    });
}, {
    requires: ['base', 'node']
});</pre>
</body>
</html>
